<template>
  <div id="people">
    <van-nav-bar title="出席人员" :right-text="rightTitle" left-arrow fixed :border="false"
    @click-left="onClickLeft" @click-right="onClickRight"></van-nav-bar>
      <div class="nav-container">
          <div class="content">
            <p class="information">共15人参会</p>
            <van-cell-group :border="false" v-for="(item,index) in list" :key="index">
              <van-cell >
                <template slot="title">
                  <img class="title-img" src="../../assets/notification/head.png">
                  <template v-if="type == 'edit'">
                    <van-icon class="delete-icon" name="clear" color="#F54B03" size="18px"/>
                  </template>
                  <span :class="type == 'edit'?'title-text':'title-text mrgin-l-15'">
                    John Lee
                  </span>
                </template>
                <template slot="default">
                  <!-- <a><img class="custom-class" src="../../assets/meeting/message.png"></a> -->
                  <a :href="`tel:17313038862`">
                    <img class="custom-class" src="../../assets/meeting/tel.png">
                  </a>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
      </div>
  </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return{
        isLoading: false,
        loading: false,
        finished: false,
        list:[],
        type: "edit",
        rightTitle:'',//右边按钮，编辑的时候才有
        deleteList:[]
      }
    },
    mounted(){
      this.type = this.$route.params.type
      if(this.type == "edit"){
        this.rightTitle = "继续添加"
      }
    },
    methods: {
      /**
       * 返回键
       * @return {[type]} [description]
       */
      onClickLeft() {
        this.$router.go(-1)
      },
      /**
       * 继续添加
       * @return {[type]} [description]
       */
      onClickRight() {
        this.$router.push({ name:"" })
      },
      /**
       * 上拉加载
       */
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push({name:i + 1,tel:'17313038862'});
          }
          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= 10) {
            this.finished = true;
          }
        }, 500);
      },
      /**
       * 下拉刷新
       * @return {[type]} [description]
       */
      onRefresh() {
        this.isLoading = true;
        setTimeout(() => {
          this.$toast.success('刷新成功');
          this.isLoading = false;
        }, 500);
      },
      /**
       * 删除选择的人员
       * @return {[type]} [description]
       */
      deletePeo() {
        /*let config = {
          method: "",
          url: "",
          data: this.deleteList
        }
        this.$axios(config).then(res => {

        }).catch(err => {
          this.$toast.fail(err.msg)
        })*/
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .content{
    padding: 0 15px;
  }
  .margin-l-10{
    margin-left: 10px;
  }
  .footer{
    vertical-align: middle;
    align-items: center;
  }
  .information{
    color: #999999;
    font-size: 14px;
  }
  .title-img{
    width: 45px;
    height: 45px;
  }
  .title-text{
    font-size: 17px;
    color: #333333;
  }
  .custom-class{
    width: 24px;
    height: 24px;
    margin-right: 20px;
  }
  a{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .delete-icon{
    position: relative;
    top: 15px;
    left: -17px;
    z-index: 3;
    background-color: #fff;
    border-radius: 50%;
  }
  .mrgin-l-15{
    margin-left: 15px;
  }
</style>
<style type="text/css" lang="less">
  #people{
    .van-cell{
      padding: 10px 0;
    }
    .van-cell__title{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
    .van-cell__value{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>